import React from 'react';
import { Row, Col, Card } from 'antd';
import { 
  RocketOutlined, 
  SafetyOutlined, 
  ThunderboltOutlined, 
  TeamOutlined 
} from '@ant-design/icons';
import Layout from '../components/layout/Layout';
import styles from '../styles/About.module.css';

const AboutPage = () => {
  const features = [
    {
      icon: <ThunderboltOutlined />,
      title: '高效处理',
      description: '使用先进的压缩和处理算法，确保快速高效地处理您的文件和图片'
    },
    {
      icon: <SafetyOutlined />,
      title: '安全可靠',
      description: '所有上传的文件严格保密，处理完成后自动删除，保障您的数据安全'
    },
    {
      icon: <RocketOutlined />,
      title: '简单易用',
      description: '直观的用户界面设计，无需专业知识，人人都能轻松上手使用'
    },
    {
      icon: <TeamOutlined />,
      title: '免费开放',
      description: '所有基础功能完全免费，没有隐藏收费，让每个人都能使用专业工具'
    }
  ];

  return (
    <Layout title="关于我们 - 在线工具平台" description="了解我们的使命和愿景">
      <div className={styles.aboutHeader}>
        <div className={styles.container}>
          <h1 className={styles.pageTitle}>关于我们</h1>
          <p className={styles.pageDescription}>
            我们致力于提供高效、简便的在线工具，让文件处理和图片编辑变得轻松愉快
          </p>
        </div>
      </div>

      <div className={styles.aboutContent}>
        <div className={styles.container}>
          <section className={styles.missionSection}>
            <h2>我们的使命</h2>
            <p>
              在当今数字化时代，文件和图片处理是日常工作和生活的必需。然而，专业的图像处理软件往往昂贵且复杂。
              我们的使命是为所有人提供免费、高效、易用的在线工具，无需安装专业软件，即可完成常见的文件和图片处理任务。
            </p>
            <p>
              我们相信技术应该简化生活，而不是增加复杂性。通过提供这些便捷工具，
              我们希望帮助用户节省时间和精力，专注于真正重要的事情。
            </p>
          </section>

          <section className={styles.featuresSection}>
            <h2>我们的优势</h2>
            <Row gutter={[24, 24]}>
              {features.map((feature, index) => (
                <Col xs={24} sm={12} md={6} key={index}>
                  <Card className={styles.featureCard}>
                    <div className={styles.featureIcon}>{feature.icon}</div>
                    <h3>{feature.title}</h3>
                    <p>{feature.description}</p>
                  </Card>
                </Col>
              ))}
            </Row>
          </section>

          <section className={styles.teamSection}>
            <h2>我们的团队</h2>
            <p>
              我们是一支充满激情的团队，由经验丰富的开发者、设计师和产品专家组成。
              团队成员拥有多年的技术开发经验，对用户体验和产品质量有着极高的要求。
            </p>
            <p>
              我们始终关注用户反馈，不断改进产品，提供更好的服务体验。
              如果您有任何建议或问题，欢迎随时与我们联系。
            </p>
          </section>

          <section className={styles.contactSection}>
            <h2>联系我们</h2>
            <p>
              如果您有任何问题、建议或合作意向，欢迎通过以下方式联系我们：
            </p>
            <ul className={styles.contactList}>
              <li>电子邮件：contact@example.com</li>
              <li>反馈表单：<a href="/help#feedback">在线反馈</a></li>
            </ul>
            <p>
              我们会在1-2个工作日内回复您的咨询。
            </p>
          </section>
        </div>
      </div>
    </Layout>
  );
};

export default AboutPage; 